<template>
  <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" responsive />
</template>

<script setup lang="ts">
import type { MenuOption } from 'naive-ui'
import { h, ref } from 'vue'
import { RouterLink } from 'vue-router'

const activeKey = ref<string | null>(null);

const menuOptions: MenuOption[] = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            name: 'home',
            params: {
              lang: 'zh-CN'
            }
          }
        },
        { default: () => '首页' }
      ),
    key: 'home',
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: '/user'
          }
        },
        { default: () => '用户' }
      ),
    key: 'user',
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: '/about'
          }
        },
        { default: () => '关于' }
      ),
    key: 'about',
  }
]
</script>
